body {
  margin: 0;
  padding: 0;
}

.el-popper {

  .t-c-o-cate {

    span {
      display: inline-block;
      // height: 24px;
      // line-height: 24px;
      padding: 8px;
      cursor: pointer;

      &:hover {

        border-radius: 16px;
        background: #00C758;
        color: #fff;
      }
    }

  }

  .o-search_t {

    display: inline-block;

    &:first-child {
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
    }

    &:last-child {
      width: 50%;
    }

  }
}



.top-container-out {



  z-index: 99;
  position: fixed;
  background-color: #fff;
  // left: 0px;
  top: 0px;
  // ------------------------------------------------------更改为flex的测试-----------------------------
  // padding: 0px;

  width: 100%;
  // width: 82%;

  height: 64px;
  // clear: none;
  // display: block;
  // min-width: 0px;
  // z-index: 21;
  // color: black;
  // font-size: 16px;
  // margin: 0px;
  // -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  // overflow: hidden;
  // ------------------------------------------------------更改为flex的测试-----------------------------

  .top-container {
    padding: 0 9%;

    // top: 0px;
    // ------------------------------------------------------更改为flex的测试-----------------------------

    // width: 1260px;
    // ------------------------------------------------------更改为flex的测试-----------------------------
    // height: 64px;
    // border-radius: 0px;
    // position: relative;
    // clear: none;
    // ------------------------------------------------------更改为flex的测试-----------------------------
    // display: block;
    display: flex;
    flex-flow: row;
    // ------------------------------------------------------更改为flex的测试-----------------------------
    // min-width: 0px;
    // color: black;
    // font-size: 16px;
    // background-color: white;
    // margin: 0px auto;
    // padding: 0px;

    // ------------------------------------------------------更改为flex的测试-----------------------------
    // .top-logo,
    // .top-nav {
    //   float: left;
    // }

    .top-logo {

      flex: 1;
      // left: 0px;
      // top: 17px;
      // width: 190px;

      // height: 28px;
      // border-radius: 0px;
      position: relative;
      // clear: none;
      // display: block;
      // min-width: 0px;
      // z-index: 13;
      // color: black;
      // font-size: 16px;
      // margin: 0px;
      // padding: 0px;
      // float: left;
      // ------------------------------------------------------更改为flex的测试-----------------------------

      a {
        font-size: 26px;
        font-family: 微软雅黑, 'Microsoft YaHei';
        color: #333333;
        line-height: 64px;

        img {
          height: 45px;
          border-radius: 0px;
          line-height: 45px;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
    }

    .top-nav {
      // ------------------------------------------------------更改为flex的测试-----------------------------
      // margin: 5px 0 0 99px;
      flex: 3;
      padding: 0 0 0 49px;

      // ------------------------------------------------------更改为flex的测试-----------------------------

      .el-menu {
        // -----------------------------------------------------新增搜索框的flex适应------------3行-------------------------
        display: flex;
        flex-flow: row;

        .el-menu-item {

          flex: 1;
          // -----------------------------------------------------新增搜索框的flex适应------------3行--------------------结束-----
          position: relative;

          border-bottom: none;

          max-width: 88px;
          padding: 0;

          &:is-active {
            border-bottom: none;
          }

          &>* {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            .el-button {
              top: -2px;
              position: relative;
            }
          }

          .el-button {

            border: none;

            padding: 0;

            color: #000;

            &:focus,
            &:hover {

              color: inherit;
              border-color: none;
              background-color: inherit;
            }
          }
        }
      }
    }

    .top-search {
      // ------------------------------------------------------更改为flex的测试-----------------------------
      flex: 3;
      display: flex;
      flex-flow: row;
      // position: absolute;
      // right: 222px;
      // text-align: right;
      // -webkit-transform: translateY(-50%);
      // transform: translateY(-50%);
      // top: 50%;
      // ------------------------------------------------------更改为flex的测试-----------------------------

      .el-autocomplete {
        flex: 1;
        position: relative;

        .el-input-group {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80%;
        }

        .el-input-group__append {
          border-radius: 0 6px 6px 0;
          padding: 0 20px;
          width: 1px;
          white-space: nowrap;
          border: 1px solid #000000;
          background-color: #000;
          border-left: 0;

          position: relative;

          .el-button {
            // padding: 0 24px;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            margin: 0;

            i {
              color: #fff;
            }
          }
        }
      }

      .el-input__inner {
        background-color: #fff;
        border-radius: 6px 0 0 6px;
        border: 1px solid #000000;
        border-right: 1px solid #000000;
        height: 32px;
        line-height: 32px;
        -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        // width: 288px;
      }




    }

    .top-login-reg {
      // ------------------------------------------------------更改为flex的测试-----------------------------
      flex: 1;
      position: relative;

      // display: flex;
      // flex-flow: row;
      // align-items: center;
      // position: absolute;
      // right: 0;
      // text-align: right;
      // -webkit-transform: translateY(-50%);
      // transform: translateY(-50%);
      // top: 50%;
      // ------------------------------------------------------更改为flex的测试-----------------------------
      .t-l-opt {
        // 此处设置是让注册登录按钮右侧居中对齐-------------------开始
        position: absolute;
        width: fit-content;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        // 此处设置是让注册登录按钮右侧居中对齐-------------------开始
      }

      .t-l-my {

        position: absolute;
        width: 100%;
        height: 100%;

        .el-link {

          &--inner {
            width: 100%;
            height: 100%;
            position: relative;

            overflow: hidden;

            .t-l-my--inner {

              position: absolute;
              right: 0;

              &>div {

                width: fit-content;
                display: inline-block;

              }

              &>div:first-child {
                top: -3px;
                position: relative;
              }
            }

            .el-dropdown {


              .el-dropdown-link {
                width: 36px;
                height: 36px;
                line-height: 36px;

                div {
                  display: inline-block;

                  .el-avatar {

                    top: 8px;

                    position: relative;

                    &>img {
                      display: inline-block;
                    }

                  }


                }

                i {
                  margin-left: 0;
                  font-size: 12px;
                }
              }

              .el-dropdown-menu {
                .el-dropdown-item {}

              }
            }
          }
        }


      }

      a {
        // flex: 1;

        // -----------------清除链接默认样式
        text-decoration: none;
        color: inherit;
      }

      .split {
        display: inline-block;
        margin: 0 10px;
      }
    }

    .el-menu {
      border: none;
    }
  }
}